﻿<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/8/22
  Time: 11:30
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String openId = request.getSession().getAttribute("openId") + "";
%>
<!DOCTYPE html>
<html>
<head>
    <%--<meta http-equiv="Access-Control-Allow-Origin" content="open.weixin.qq.com">--%>
    <title>新途微助手</title>
    <%@include file="../../../include/header.jsp" %>
    <style>
        a:hover, a:visited, a:active, a:link {
            text-decoration: none;
            color: black;
        }

        #coupon, #shop {
            margin-left: 10%;
        }

        #select label {
            font-family: -apple-system, SF UI Text, Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 1.4;
            font-weight: 100;
        }

        table {
            width: 100%;
        }

        table tr {
            width: 30%;
        }

        table tr td {
            text-align: center;
            height: 40px;
        }

        .row {
            background-color: #FFFFFF;
            margin-bottom: 10px;
        }

        .row .indexToolbar {
            text-align: center;
            line-height: 40px;
            height: 40px;
            margin: 10px 0;
            font-size: 14px;
            color: #4B4C4C;
        }

        .item-title {
            color: black;
            font-size: 18px;
            font-weight: normal;
            text-align: left;
            width: 50%;
        }

        .item-input {
            width: 50%;
        }

        .item-input input {
            text-align: right;
        }

        .list-block .beizhu::after {
            height: 0px;
        }

        .search-data-order-by {
            border-bottom: 1px solid #509AF1;
            font-weight: bold;
        }
    </style>
</head>
<body>
<!-- Status bar overlay for full screen mode (PhoneGap) -->
<div class="statusbar-overlay"></div>
<!-- Panels overlay-->
<div class="panel-overlay"></div>
<!-- Views -->
<div class="views">
    <!-- Your main view, should have "view-main" class -->
    <div class="view view-main">
        <!-- Top Navbar-->
        <div class="navbar">
            <div class="navbar-inner">
                <!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
                <div class="left">
                    <a class="link" onClick="targetPage()" id="back"><i class="icon icon-back"></i><span>返回</span></a>
                </div>
                <div class="center sliding">包车陪游</div>
                <div class="right" id="sellerShop"></div>
            </div>
        </div>
        <!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
        <div class="pages navbar-through toolbar-through">
            <!-- Page, "data-page" contains page name -->
            <div class="page" data-page="index">
                <!-- Scrollable page content -->
                <div class="page-content">
                    <div style="width:100%;height:100px;background-color:#509AF1;padding:30px 10%">
                        <div class="dropdown" style="width:100%;height:40px;text-align: center;">
                            <span style="display: none" id="span">皇后镇</span>
                            <select class="btn btn-default dropdown-toggle" type="button" id="cityId"
                                    data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"
                                    style="width: 100%;height:100%;border-radius: 38px;webkit-border-radius:38px;
                                    moz-border-radius :38px;
                                    background: url(${cdnContentPath}/static/image/ticket/city.png)  no-repeat 25px center , url(${cdnContentPath}/static/image/ticket/select-bottom.png)  no-repeat 95% center;
                                    background-color: #FFFFFF;
                                    border: solid 0px #000;appearance:none;-moz-appearance:none;-webkit-appearance:none;
                                    font-size: 20px;
                                    /*background: url(../../../static/image/ticket/city.png) no-repeat scroll right center transparent;*/
                                    " onchange="App.cityInputCenter()">

                            </select>
                        </div>
                    </div>

                    <div class="content-block" style="margin:0px;background-color: white">
                        <div style="height:35px"></div>
                        <input type="hidden" id="queryType" value="11"/>
                        <table id="index-table">
                            <tr>
                                <td><img src="${cdnContentPath}/static/image/chartered/accompany_yes.png" width="60%"/></td>
                                <td style="text-align: center;"><img
                                        src="${cdnContentPath}/static/image/chartered/fulltime_chartered_no.png" width="60%"/>
                                </td>
                                <td><img src="${cdnContentPath}/static/image/chartered/time_chartered_no.png" width="60%"/></td>
                                <td><img src="${cdnContentPath}/static/image/chartered/transfer_no.png" width="60%"/></td>
                            </tr>
                            <tr>
                                <td>陪游</td>
                                <td>全日包车</td>
                                <td>计时包车</td>
                                <td>接送机</td>
                            </tr>
                        </table>
                    </div>
                    <div class="list-block">
                        <ul>
                            <li>
                                <div class="item-content">
                                    <div class="item-inner" style="height:50px;text-align: right;">
                                        <div class="item-title label">人&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数:
                                        </div>
                                        <div class="item-input">
                                            <img disabled="disabled" id="jianhao" width="10%"
                                                 style="cursor:pointer;margin-right: 5%"
                                                 src="${cdnContentPath}/static/image/chartered/jianhao_no.png" onclick="jh()"/>
                                            <img height="25px" src="${cdnContentPath}/static/image/chartered/shuxian.png"/>
                                            <label id="personNumber"
                                                   style="margin-left: 5%;margin-right: 5%;width:10%;text-align:center;">1</label>
                                            <img height="25px" src="${cdnContentPath}/static/image/chartered/shuxian.png"/>
                                            <img id="jiahao" width="10%" style="cursor:pointer;margin-left: 5%"
                                                 src="${cdnContentPath}/static/image/chartered/jiahao.png" onclick="jiah()"/>
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <li>
                                <div class="item-content">
                                    <div class="item-inner" style="height:50px;text-align: right;">
                                        <div class="item-title label">出发日期:</div>
                                        <div class="item-input">
                                            <input type="text" placeholder="" value="2016-10-21 14:22" readonly
                                                   id="picker-date" class="datetime">
                                        </div>
                                    </div>
                                </div>
                            </li>
                            <!-- Select -->
                            <li>
                                <div class="item-content">
                                    <div class="item-inner" style="height:50px;text-align: right;">
                                        <div class="item-title label">结束日期:</div>
                                        <div class="item-input">
                                            <input type="text" id="picker-date1" value="2016-10-21 15:22" readonly
                                                   class="datetime">
                                        </div>
                                    </div>
                                </div>
                            </li>
                        </ul>
                        <input type="hidden" id="picker-date2">
                        <div class="picker-modal picker-info">
                            <div class="toolbar">
                                <div class="toolbar-inner">
                                    <div class="left"><a href="#" onclick="qingkong()" class="close-picker">清空</a></div>
                                    <div class="right"><a href="#" class="close-picker">完成</a></div>
                                </div>
                            </div>
                            <div class="picker-modal-inner">
                                <div class="content-block">
                                    <div id="picker-date-container"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Bottom Toolbar-->
        <div class="toolbar" style="height:60px;" id="index-tool">
            <div class="toolbar-inner" style="background-color:white;">
                <a class="button" id="toolbar-button" onclick="handler()"
                   style="width:60%;margin-left: 20%;background-color:#509AF1;color:white;height:40px;line-height:40px;
                   border-radius:2px;">搜索</a>
            </div>
        </div>
    </div>
</div>
<script type="text/template7" id="charteredinfo">
    <%--<div class="toolbar-inner" style="text-align: center;padding:0px;">--%>
    <table style="width:100%;height:60px">
        <tr>
            <td style="width: 30%;height:30px"><img width="30px" src="{{picture}}"/></td>
            <td style="width: 30%;height:30px"><img width="30px" src="${cdnContentPath}/static/image/chartered/renshu.png"/></td>
            <td style="width: 40%;height:30px"><label style="font-size:14px;">始:{{startTime}}</label></td>
        </tr>
        <tr>
            <td style="width: 30%;height:30px"><label style="font-size:14px;">{{photoStr}}</label></td>
            <td style="width: 30%;height:30px"><label style="font-size:14px;">{{personNumber}}人</label></td>
            <td style="width: 40%;height:30px"><label style="font-size:14px;">末:{{endTime}}</label></td>
        </tr>
    </table>
    <%--</div>--%>
</script>
<%@include file="../../../include/footer.jsp" %>

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script src="${cdnContentPath}/static/template7/dist/template7.js"></script>
<script type="text/javascript" src="${relativePath}/view/menu2/chartered/my-app.js"></script>
<script>
    var myApp = new Framework7();

    var $$ = Framework7.$;

    var mainView = myApp.addView('.view-main');

    //控制城市选择空间居中显示，text-indent: 50px;
    App.cityInputCenter();
    $(function () {
        $(".item-input input").on("click", function () {
            $('.page-content').scrollTop(50);
        });
        $.post(Constant.ctx("/mulanweb/common/city/search"), {PageSize: 20, PageNumber: 1}, function (info) {
            var option = [];
            for (var i in info.DataList) {
                option[i] = '<option value="' + info.DataList[i].Id + '">' + info.DataList[i].NameCn + '</option>';
            }
            $("#cityId").html(option.join(" "));
        });
    })

    function handler() {
        var pageName = myApp.mainView.activePage.name;
        if (pageName == 'index') {
            var cityId = $("#cityId").val();
            var typeId = $("#queryType").val();
            var personNumber = $("#personNumber").text();
            var startTime = $("#picker-date").val();
            var endTime = $("#picker-date1").val();
            var endYear = Number(endTime.split(" ")[0].split("-")[0]);
            var endMonth = Number(endTime.split(" ")[0].split("-")[1]);
            var endDay = Number(endTime.split(" ")[0].split("-")[2]);
            var startYear = Number(startTime.split(" ")[0].split("-")[0]);
            var startMonth = Number(startTime.split(" ")[0].split("-")[1]);
            var startDay =Number(startTime.split(" ")[0].split("-")[2]);
            var amount = 1;
            if (startTime && endTime) {
                var dayTypes = [8, 11, "8", "11"];
                if (($.inArray(typeId, dayTypes)) > -1) {
                    if (endYear == startYear && endMonth == startMonth) {
                        amount = Number(endDay) - Number(startDay) + 1;
                    } else if (endYear == startYear && endMonth - startMonth < 2) {
                        var bigMonth = [1, 3, 5, 7, 8, 10, 12, '1', '3', '5', '7', '8', '10', '12'];
                        var smallMonth = [4, 6, 9, 11, '4', '6', '9', '11'];
                        if (($.inArray(startMonth, bigMonth)) > -1) {
                            amount = 31 - Number(startDay) + Number(endDay) + 1;
                        } else if (($.inArray(startMonth, smallMonth)) > -1) {
                            amount = 30 - Number(startDay) + 1 + Number(endDay);
                        } else {
                            amount = 28 - Number(startDay) + Number(endDay) + 1;
                        }
                    }
                } else if (typeId == 9) {
                    var st = new Date(startTime).getTime();
                    var et = new Date(endTime).getTime();
                    var re = (et - st) / 1000 / 60 / 60;
                    amount = Math.ceil(re);
                }
                if (startTime < endTime) {
                    App.showLoading();
                    mainView.router.load({url: "../search-data.jsp?cityId=" + cityId + "&typeId=" + typeId + "&startTime=" + startTime + "&endTime=" + endTime + "&personNumber=" + personNumber + "&amount=" + amount});
                } else {
                    Constant.alertMessage("开始时间不能大于结束时间");
                }
            } else {
                Constant.alertMessage("请选择时间");
            }
            //$("#toolbar-button").attr("href", "../search-data.jsp?cityId=" + cityId + "&typeId=" + typeId);
        }
    }

    function targetPage() {
        /*var pageName = myApp.mainView.activePage.name;
         if (pageName == 'index') {
         WeixinJSBridge.call('closeWindow');
         } else if (pageName == 'search') {
         $("#back").attr("href", "index.jsp");
         $("#toolbar-button").html("搜索");
         mainView.showToolbar();
         } else if (pageName == 'detail') {
         $("#back").attr("href", "../search-data.jsp");
         mainView.hideToolbar();
         }*/
        var pageName = myApp.mainView.activePage.name;
        if (pageName == 'index') {
            WeixinJSBridge.call('closeWindow');
        } else {
            mainView.router.back();
        }
    }
    shijian();
    tu();
</script>
</body>
</html>
